var util = require('../../../utils');

module.exports.init = function () {
  var $imgViewer = $('.im-view-pic');
  if ($imgViewer.length) {
    return;
  }

  $imgViewer = $('<div class="im-view-pic"><div class="close-btn"></div><div class="prev"></div><div class="next"></div></div>');
  $imgViewer.appendTo('body');

  //查看大图,初始化视图窗口
  $('.im-wrap').on('click', '.message-content img', function () {
    var curId = $(this).attr('id');
    var $content = $(this).parents('.im-content');
    var viewId = 'view-' + $content.attr('id').substr(5);
    $imgViewer.attr('id', viewId);
    var imgs = $content.find('.message-content img');
    var win_w = $(window).width();
    var win_h = $(window).height();
    $.each(imgs, function (index, img) {
      var $img = $(img);
      var src = $img.attr('src');
      var id = $img.attr('id');
      var query = util.parseQuery(src);

      // 获取图片的实际长宽
      var imgWidth = query.width;
      var imgHeight = query.height;

      if (Image) {
        var theImage = new Image();
        theImage.src = $img.attr('src');
        imgWidth = theImage.width;
        imgHeight = theImage.height;
      }

      if (!imgWidth || !imgHeight) {
        imgWidth = $img.width();
        imgHeight = $img.height();
      }

      var imgRadio = imgWidth / imgHeight;
      var winRadio = win_w / win_h;

      // 最大长宽不能超过屏幕的90%
      if (imgRadio > winRadio) {
        imgWidth = imgWidth > win_w * 0.9 ? win_w * 0.9 : imgWidth;
        imgHeight = imgWidth / imgRadio;
      } else {
        imgHeight = imgHeight > win_h * 0.9 ? win_h * 0.9 : imgHeight;
        imgWidth = imgHeight * imgRadio;
      }

      //构造图片元素
      var $viewImg = $('<img src=' + src + '  id="item-' + id + '">');

      //图片居中显示
      $viewImg.css({
        'margin-left': (win_w - parseInt(imgWidth)) / 2 + 'px',
        'margin-top': (win_h - parseInt(imgHeight)) / 2 + 'px',
        'width': imgWidth,
        'height': imgHeight
      });

      //如果与当前点击图片的id相同，则显示，否则隐藏
      if (id == curId) {
        $viewImg.css({'display': 'block'});
      } else {
        $viewImg.css({'display': 'none'});
      }
      $imgViewer.append($viewImg);
    });

    //向左向右切换按钮是否展示
    var $curImg = $imgViewer.find('#item-' + curId);
    hasPrevOrNext($curImg);

    //淡入显示大图,回调函数处理左右切换逻辑
    $imgViewer.fadeIn('normal', 'linear', function () {
      $('.im-view-pic .prev').on('click', function () {
        var $prevImg = $curImg.prev('img');
        $prevImg.show().siblings('img').hide();
        $curImg = $prevImg;
        hasPrevOrNext($curImg);
      });
      $('.im-view-pic .next').on('click', function () {
        var $nextImg = $curImg.next('img');
        $nextImg.show().siblings('img').hide();
        $curImg = $nextImg;
        hasPrevOrNext($curImg);
      });
    });
  });

  //关闭大图展示窗口
  $('.im-view-pic .close-btn').on('click', function () {
    $('.im-view-pic img').remove();
    $('.im-view-pic').hide();
  });
};

//判断大图展示是否有prev，next按钮
function hasPrevOrNext($ele) {
  if ($ele.prev('img').length) {
    $('.im-view-pic .prev').show();
  } else {
    $('.im-view-pic .prev').hide();
  }
  if ($ele.next('img').length) {
    $('.im-view-pic .next').show();
  } else {
    $('.im-view-pic .next').hide();
  }
}
